<script lang="ts" setup>
import { ref } from 'vue'

import { RecordButton, Dialogs } from './'
import useDialogStore from '@/stores/modules/dialog'
import { MessageType, SendStatus } from '@/stores/modules/dialog'
import type { DialogItem } from '@/stores/modules/dialog'


const dialogStore = useDialogStore()
const isText = ref(true)
const message = ref('')
// const lockInput = ref(false)

function sendMessage() {
  if (message.value.trim()) {
    // showToast(message.value)
    // eslint-disable-next-line ts/no-unused-expressions
    const msg: DialogItem = dialogStore.addMsg({ type: MessageType.TEXT, content: message.value })
    setTimeout(() => {
      // msg.status = SendStatus.SUCCESS
      dialogStore.setStatus(msg.recordId, SendStatus.SUCCESS)
    }, 2000);
    message.value = ''
  }
}

function handleClick() {
  // showToast('1234567')
}

</script>

<template>
  <div class="dialog-page gap-10">
    <div class="dialog-container overflow-y-auto flex-1">
      <van-cell-group inset class="h-full">
        <Dialogs />

      </van-cell-group>
    </div>
    <div class="dialog-input relative flex items-end bg-[var(--van-cell-group-background)] p-5" @click="handleClick()">
      <IIcon :icon="isText ? 'weui:voice-outlined' : 'weui:keyboard-outlined'" @click="() => { isText = !isText }" />
      <van-field v-if="isText" v-model="message" autosize class="self-center rounded-xl" maxlength="100"
        placeholder="请输入报文信息" rows="1" show-word-limit style="background-color: #F7F8FA;" type="textarea" />
      <RecordButton v-else class="flex-1 self-center" />
      <van-button v-if="message && isText" class="send-button ml-5 w-60" type="primary" @click="sendMessage()">
        发送
      </van-button>
      <van-uploader v-else>
        <IIcon icon="weui:add2-outlined" />
      </van-uploader>
    </div>
  </div>
</template>

<style lang="less" scoped>
@default-height: calc((var(--van-cell-vertical-padding) * 2) + 28px);

.dialog-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--van-nav-bar-height) - (min(4.267vw, 25.6px) * 2));
}

.dialog-input {
  transition: all 0.3s linear;

  .van-field {
    flex: 1;
    margin: 0 10px;
  }

  .i-icon {
    padding: 3px;
    height: @default-height;
    width: @default-height;
  }

  .send-button {
    height: calc(@default-height - 16px);
    margin-bottom: 8px;
  }
}
</style>

<route lang="json5">
{
name: 'dialog',
meta: {
title: '对话',
i18n: 'menus.dialog'
},
}
</route>
